<template>
  <div class="workflow-canvas">
    <!-- 左侧组件列表 -->
    <div class="node-list">
      <div v-for="node in filteredNodes" 
           :key="node.id" 
           class="node-wrapper">
        <component 
          :is="getNodeComponent(node.class_type)"
          :nodeData="node"
          :nodeId="node.id"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineAsyncComponent } from 'vue'

// 导入所有节点组件
const nodeComponents = {
  CheckpointLoaderSimple: defineAsyncComponent(() => 
    import('./templates/CheckpointLoaderSimple.vue')
  ),
  CLIPTextEncode: defineAsyncComponent(() => 
    import('./templates/CLIPTextEncode.vue')
  ),
  KSampler: defineAsyncComponent(() => 
    import('./templates/KSampler.vue')
  ),
  LoadImage: defineAsyncComponent(() => 
    import('./templates/LoadImage.vue')
  ),
  SaveImage: defineAsyncComponent(() => 
    import('./templates/SaveImage.vue')
  ),
  VAEDecode: defineAsyncComponent(() => 
    import('./templates/VAEDecode.vue')
  ),
  VAEEncode: defineAsyncComponent(() => 
    import('./templates/VAEEncode.vue')
  )
}

const props = defineProps({
  nodes: {
    type: Object,
    required: true
  }
})

// 过滤显示的节点
const filteredNodes = computed(() => {
  if (!props.nodes) return []
  
  return Object.entries(props.nodes)
    .filter(([_, node]) => node.show !== false) // 过滤掉 show 为 false 的节点
    .map(([id, node]) => {
      return {
        id,
        class_type: node.class_type || 'Unknown',
        _meta: {
          title: node._meta?.title || `Node ${id}`,
          ...(node._meta || {})
        },
        inputs: node.inputs || {},
        ...node  // 保留其他可能的属性
      }
    })
})

const canvasWidth = ref(2000)
const canvasHeight = ref(1500)

// 获取节点位置样式
const getNodeStyle = (node) => {
  return {}  // 不再需要随机位置
}

// 获取对应的节点组件
const getNodeComponent = (type) => {
  const component = nodeComponents[type]
  if (!component) {
    console.warn(`未找到组件类型: ${type}，使用默认组件`)
    return defineAsyncComponent(() => import('./templates/DefaultNode.vue'))
  }
  return component
}
</script>

<style scoped>
.workflow-canvas {
  position: relative;
  background: #ffffff;
  height: 100%;
  display: flex;
}

.node-list {
  width: 320px;  /* 固定左侧宽度 */
  height: 100%;
  overflow-y: auto;  /* 允许垂直滚动 */
  padding: 16px;
  border-right: 1px solid #eee;
  background: #f8f9fa;  /* 略微灰色的背景 */
}

.node-wrapper {
  margin-bottom: 16px;  /* 节点之间的间距 */
}

/* 自定义滚动条样式 */
.node-list::-webkit-scrollbar {
  width: 8px;
}

.node-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.node-list::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.node-list::-webkit-scrollbar-thumb:hover {
  background: #999;
}
</style> 